<template>
  <view class="bg-gray-50 w-[750rpx] pb-[100rpx] box-border" >
    <!-- 用户信息头部 -->
    <!-- <view
      class="bg-gradient-to-r from-purple-600 to-blue-500 text-white p-[40rpx] rounded-b-[40rpx] shadow-lg"
    >
      <view class="flex items-center mb-[30rpx]">
        <view
          class="w-[120rpx] h-[120rpx] rounded-full border-4 border-white border-opacity-30 bg-white overflow-hidden mr-[30rpx]"
        >
          <image
            src="https://via.placeholder.com/120x120/2575fc/ffffff?text=头像"
            class="w-full h-full object-cover"
          />
        </view>
        <view class="flex-1">
          <view class="text-[40rpx] font-bold mb-[10rpx] flex items-center">
            <text>张推广达人</text>
            <view
              class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-yellow-800 px-[15rpx] py-[5rpx] rounded-[20rpx] text-[24rpx] font-bold ml-[15rpx]"
            >
              SVIP会员
            </view>
          </view>
          <text class="text-[28rpx] opacity-90">ID: 888888</text>
        </view>
      </view>

      <view
        class="bg-white bg-opacity-15 rounded-[20rpx] p-[25rpx] flex justify-between items-center"
      >
        <view class="text-center">
          <text class="text-[26rpx] opacity-80 block mb-[10rpx]"
            >可提现奖励</text
          >
          <text class="text-[40rpx] font-bold">¥ 1,568.50</text>
        </view>
        <nut-button
          type="primary"
          size="small"
          class="bg-white text-blue-500 px-[40rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold"
          @click="handleWithdraw"
        >
          提现到微信
        </nut-button>
      </view>
    </view> -->
    <!-- 返回按钮 -->
    <view
      class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer"
      @click="goBack"
    >
      <IconFont
        font-class-name="iconfont"
        class-prefix="icon"
        name="left"
        size="20"
        color="#000"
      />
    </view>

    <!-- 推广二维码卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view
        class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100"
        :style="{textAlign: 'center',width:'100%',display:'block'}"
      >
        <text class="text-[34rpx] font-bold text-gray-800" >我的推广二维码</text>
        <IconFont name="qrcode" class="text-blue-500 text-[40rpx]" />
      </view>

      <view class="text-center py-[20rpx]">
        <view
          class="w-[350rpx] h-[350rpx] mx-auto bg-gray-50 rounded-[20rpx] flex items-center justify-center text-[100rpx] text-blue-500 relative"
        >
          <IconFont name="qrcode" />
          <view
            class="absolute w-[70rpx] h-[70rpx] bg-white rounded-[10rpx] flex items-center justify-center text-[30rpx] text-blue-500"
          >
            <IconFont name="crown" />
          </view>
        </view>
        <text class="mt-[25rpx] text-[28rpx] text-gray-600 block"
          >扫码注册成为您的专属会员</text
        >
      </view>

      <view class="flex justify-between mt-[40rpx]">
        <nut-button
          type="default"
          size="large"
          class="flex-1 mr-[10rpx] bg-blue-50 text-blue-500 border-blue-500"
          @click="handleCopyLink"
        >
          <IconFont name="link" class="mr-[10rpx]" />
          复制推广链接
        </nut-button>
        <nut-button
          type="primary"
          size="large"
          class="flex-1 ml-[10rpx] bg-blue-500"
          @click="handleSaveQR"
        >
          <IconFont name="download" class="mr-[10rpx]" />
          保存二维码
        </nut-button>
      </view>
    </view>

    <!-- 推广说明 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg promotion-tips">
      <view class="mb-[20rpx] pb-[10rpx] border-b border-gray-100">
        <text class="text-[32rpx] font-bold text-gray-800">推广说明要点</text>
      </view>
      <view class="tip-list">
        <view class="tip-item text-[28rpx] text-gray-700 mb-[12rpx]">1. 每成功邀请一位新用户注册并完成首单，可获得奖励。</view>
        <view class="tip-item text-[28rpx] text-gray-700 mb-[12rpx]">2. 推广链接请勿恶意刷量，否则将取消奖励资格。</view>
        <view class="tip-item text-[28rpx] text-gray-700 mb-[12rpx]">3. 奖励将在用户完成任务后自动发放至账户。</view>
        <view class="tip-item text-[28rpx] text-gray-700 mb-[12rpx]">4. 可在“推广统计中心”随时查看推广数据和奖励明细。</view>
        <view class="tip-item text-[28rpx] text-gray-700">5. 如有疑问请联系客服。</view>
      </view>
    </view>

    <!-- 推广数据卡片 -->
    <!-- <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">推广数据统计</text>
        <IconFont name="chart-line" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="grid grid-cols-3 gap-[20rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">128</text>
          <text class="text-[26rpx] text-gray-600">总推广会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">86</text>
          <text class="text-[26rpx] text-gray-600">已消费会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">42</text>
          <text class="text-[26rpx] text-gray-600">未消费会员</text>
        </view>
      </view>
    </view> -->

    <!-- 分销数据卡片 -->
    <!-- <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">推广奖励明细</text>
        <IconFont name="money-bill-wave" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="space-y-[30rpx]">
        <view 
          v-for="(item, index) in rewardData" 
          :key="index"
          class="flex justify-between py-[25rpx] border-b border-gray-100"
        >
          <text class="text-gray-600">{{ item.label }}</text>
          <text class="font-bold text-gray-800">{{ item.value }}</text>
        </view>
      </view>
    </view> -->

    <!-- 平台扣点卡片 -->
    <!-- <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">平台扣点比例</text>
        <IconFont name="percent" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="flex justify-between">
        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">普通会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block">15%</text>
          <text class="text-[26rpx] text-gray-600 mb-[20rpx] block">平台信息服务费比例</text>
        </view>
        
        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">SVIP会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block">5%</text>
          <text class="text-[26rpx] text-gray-600 mb-[20rpx] block">平台信息服务费比例</text>
          <nut-button 
            type="warning" 
            size="small"
            class="w-full text-[28rpx] font-bold"
            @click="handleUpgrade"
          >
            立即升级
          </nut-button>
        </view>
      </view>
    </view> -->

    <!-- 底部导航 -->
    <!-- <view class="fixed bottom-0 left-0 w-[750rpx] bg-white flex justify-around py-[20rpx] shadow-lg z-100">
      <view 
        v-for="(nav, index) in navItems" 
        :key="index"
        class="flex flex-col items-center text-[24rpx]"
        :class="nav.active ? 'text-blue-500' : 'text-gray-400'"
        @click="handleNavClick(nav.name)"
      >
        <IconFont :name="nav.icon" class="text-[40rpx] mb-[8rpx]" />
        <text>{{ nav.name }}</text>
      </view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

// 奖励数据
const rewardData = ref([
  { label: "直接推荐会员", value: "86人" },
  { label: "团队会员总数", value: "243人" },
  { label: "团队消费总额", value: "¥ 86,420.50" },
  { label: "累计奖励金额", value: "¥ 3,856.80" },
  { label: "本月预估收益", value: "¥ 1,245.60" },
]);

// 底部导航
const navItems = ref([
  { name: "首页", icon: "home", active: false },
  { name: "团队", icon: "users", active: false },
  { name: "我的", icon: "user", active: true },
  { name: "钱包", icon: "wallet", active: false },
  { name: "设置", icon: "cog", active: false },
]);

// 提现
const handleWithdraw = () => {
  Taro.showToast({
    title: "提现申请已提交，将在1-3个工作日内到账",
    icon: "success",
  });
};

// 复制推广链接
const handleCopyLink = () => {
  Taro.setClipboardData({
    data: "https://platform.com/invite?code=888888",
    success: () => {
      Taro.showToast({
        title: "推广链接已复制到剪贴板",
        icon: "success",
      });
    },
  });
};

// 保存二维码
const handleSaveQR = () => {
  Taro.showToast({
    title: "推广二维码已保存到相册",
    icon: "success",
  });
};

// 升级会员
const handleUpgrade = () => {
  Taro.showToast({
    title: "正在跳转SVIP会员升级页面",
    icon: "none",
  });
};

// 导航点击
const handleNavClick = (name: string) => {
  navItems.value.forEach((item) => {
    item.active = item.name === name;
  });

  Taro.showToast({
    title: `切换到${name}`,
    icon: "none",
  });
};
</script>
